<template>
  <el-col :span="24">
    <el-card class="card">
      <div class="block pull-right dateselect mt10">
        <el-date-picker v-model="time" type="date" placeholder="选择日期" @change="changeTime">
        </el-date-picker>
      </div>
      <el-row :gutter="20" class="row statistic border" v-if="statisticDatas.length>0">
        <h3 class="mf20">最新疫情状况</h3>
        <div v-for="(item,index) in statisticDatas" :key="index">
          <StatisticShow :statisticData="item">
            <template v-slot:header>
              <span v-if="index==0">全球疫情</span>
              <span v-if="index==1">国内疫情</span>
              <span v-if="index==2">国外疫情</span>
            </template>
          </StatisticShow>
        </div>
      </el-row>
      <el-row :gutter="20" class="row border">
        <el-col :span="24" v-loading="loading">
          <MapCharts v-if="mapChartsData.length>0" ref="mapCharts" :mapChartsData="mapChartsData"></MapCharts>
          <div class="nodata" v-else></div>
        </el-col>
      </el-row>
    </el-card>
  </el-col>
</template>

<script>
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import ICountUp from 'vue-countup-v2'
import formatTime from '../utils/formatTime'
import MapCharts from '../components/MapCharts'
import DateSelect from '../components/DateSelect'
import StatisticShow from '../components/StatisticShow.vue'
import BMap from '../utils/map.js'
import {
  axiosUtil
} from "../network/axiosUtil"
export default {
  name: "Welcome",
  data () {
    return {
      week: '',
      delay: 500,
      width: '',
      percentage: 20,
      provinceName: '',
      time: new Date() - 3600 * 1000 * 24,
      mapChartsData: [],
      statisticDatas: [],
      loading: true
    }
  },
  methods: {
    changeTime () {
      if (this.time && this.time != '') {
        this.loading = true
        this.getMapChartsData()
      }
    },
    getMapChartsData () {
      axiosUtil({
        url: '/getProvincesDailyByTime',
        method: 'get',
        params: {
          provinceName: this.provinceName,
          startTime: formatTime(this.time, "yyyyMMdd"),
          endTime: formatTime(this.time, "yyyyMMdd"),
        }
      }).then(data => {
        if (data) {
          //代表请求数据成功
          this.mapChartsData = data
          this.loading = false
        }
      })
    },
    getStatisticData () {
      axiosUtil({
        url: '/getAllStatistics',
        method: 'get',
      }).then(data => {
        if (data) {
          //代表请求数据成功
          this.statisticDatas = data
        }
      })
    },
    jump (url) {
      window.open(url)
    },
    getAddress () {
      console.log(navigator.geolocation)
      // 检测是否支持地理定位
      if (navigator.geolocation) {
        const that = this
        navigator.geolocation.getCurrentPosition(
          function (position) {
            console.log(position.coords.longitude, position.coords.latitude) // getCurrentPosition()获取到的经纬度
            BMap.init().then((BMap) => {
              const point = new BMap.Point(position.coords.longitude, position.coords.latitude)
              const gc = new BMap.Geocoder()
              gc.getLocation(point, function (rs) {
                const addComp = rs.addressComponents
                const address = rs.address  //得到当前地址
                that.$store.commit('setPosition', rs)
                console.log(address, addComp)
              })
            })
          },
          function (e) {
            console.log(123)
            throw (e.message)
          }
        )
      }
    }

  },
  mounted () {
    this.getAddress()
    this.getStatisticData()
    this.getMapChartsData()
  },
  components: {
    ICountUp,
    MapCharts,
    DateSelect,
    StatisticShow
  }
}
</script>

<style scoped>
.dateselect {
  position: relative;
  z-index: 100;
  margin-right: 20px;
}

.row,
.cardBottom {
  margin: 0px 0px 20px !important;
  padding: 0px 10px;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
  padding: 3px 0;
  display: flex;
}

ul li span[number] {
  display: block;
  width: 21px;
  max-width: 21px;
  min-width: 21px;
  height: 21px;
  max-height: 21px;
  line-height: 21px;
  border-radius: 21px;
  margin-right: 5px;
  text-align: center;
  background-color: #409eff;
}

ul li span[articleHeader]:hover {
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  background-color: #f2f6fc;
}

.echarts {
  width: 100%;
  height: 500px;
}

.statistic span {
  font-size: 20px;
  font-weight: 600;
}
</style>